UI Quiz

  • Screen 1

    UI

    1. main.dart

    
import 'package:flutter/material.dart';
import 'package:a/screens/home_page.dart';

import 'dart:ui';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double screenWidth = window.physicalSize.width;
    return MaterialApp(
      debugShowCheckedModeBanner: false,

      theme: ThemeData(
          scaffoldBackgroundColor: Color(0xffffff)
       ),
      home: HomePage(),
    );
  }
}

    2. home_page.dart

    1. Column() - for dividing the screen vertically

     
    
import 'package:flutter/material.dart';
import 'package:a/widgets/quiz_header.dart';

class HomePage extends StatelessWidget {

  HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              QuizHeader()
            ],
          ),
        )
    );
  }
}

    3. QuizHeader

    widgets/quiz_header.dart

    1. bg image

    1. Container - for bg image

     
    
import 'package:flutter/material.dart';
class QuizHeader extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Container(
        height: 200,
        child: Stack(
          children: [
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage("images/bg.jpg"),
                  fit:BoxFit.cover
                )
              ),

            )
          ],
        ),


    );

  }
}
    2. add the top row

    1. stack() for overlapping the elements

    2. container() - for bg image

    3. Row() - for horizontal dividing

    4. Column() for dividing vertically

    5. CircleAvatar

     
    
import 'package:flutter/material.dart';
class QuizHeader extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          height: 200,
          padding: EdgeInsets.only(top: 20, left:15,right:15),
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage("images/bg.jpg"),
                  fit:BoxFit.cover
              )
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [

              Column(
                children: [
                  Text(
                    "Let's Play",
                    style: TextStyle(
                        fontWeight: FontWeight.w600,
                        fontSize: 30,
                        color: Colors.white
                    ),
                  )

                  ,

                  Text(
                    "And be the first",
                    style: TextStyle(
                        fontWeight: FontWeight.w500,
                        fontSize: 15,
                        color: Colors.white
                    ),
                  )

                ],
              ),


              CircleAvatar(
                child: Text(
                  "MV"
                ),
              )

            ],
          ),

        )
      ],
    );

  }
}
    3. place card layout ove the bg image 
    

import 'package:flutter/material.dart';
class QuizHeader extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 280,
      child: Stack(
        children: [
          Container(
            height: 200,
            padding: EdgeInsets.only(top: 20, left:15,right:15),
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage("images/bg.jpg"),
                    fit:BoxFit.cover
                )
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [

                Column(
                  children: [
                    Text(
                      "Let's Play",
                      style: TextStyle(
                          fontWeight: FontWeight.w600,
                          fontSize: 30,
                          color: Colors.white
                      ),
                    )

                    ,

                    Text(
                      "And be the first",
                      style: TextStyle(
                          fontWeight: FontWeight.w500,
                          fontSize: 15,
                          color: Colors.white
                      ),
                    )

                  ],
                ),


                CircleAvatar(
                  child: Text(
                      "MV"
                  ),
                )

              ],
            ),

          ),

          Positioned(
            bottom: -20,
            left: 0,
            right: 0,

            child: Padding(
                padding: EdgeInsets.symmetric(vertical: 20, horizontal: 10),
                child: SizedBox(
                  height: 140,
                  child: Card(

                  ),
                )
            ),
          )
        ],
      ),
    );

  }
}
    4. place the content 
    

import 'package:flutter/material.dart';
class QuizHeader extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 250,
      child: Stack(
        children: [
          Container(
            height: 200,
            padding: EdgeInsets.only(top: 20, left:15,right:15),
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage("images/bg.jpg"),
                    fit:BoxFit.cover
                )
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [

                Column(
                  children: [
                    Text(
                      "Let's Play",
                      style: TextStyle(
                          fontWeight: FontWeight.w600,
                          fontSize: 30,
                          color: Colors.white
                      ),
                    )

                    ,

                    Text(
                      "And be the first",
                      style: TextStyle(
                          fontWeight: FontWeight.w500,
                          fontSize: 15,
                          color: Colors.white
                      ),
                    )

                  ],
                ),


                CircleAvatar(
                  child: Text(
                      "MV"
                  ),
                )

              ],
            ),

          ),

          Positioned(
            bottom: -20,
            left: 0,
            right: 0,

            child: Padding(
                padding: EdgeInsets.symmetric(vertical: 15, horizontal: 10),
                child: SizedBox(
                  height: 140,
                  child: Card(
                    elevation: 5,
                    shadowColor: Colors.black,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(10)
                      )
                    ),
                    child: Padding(
                      padding: EdgeInsets.all(8),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          
                          
                          Text(
                              "Enter your quiz code"
                          ),

                          Text(
                              "To play with your friends"
                          ),

                          Row(
                            children: [

                              Expanded(
                                child:TextField(
                                  decoration: InputDecoration(
                                      hintText: "Code",
                                      contentPadding: EdgeInsets.all(10),
                                      border: OutlineInputBorder(
                                          borderRadius: BorderRadius.all(Radius.circular(10))
                                      )
                                  ),
                                ),
                              ),

                              ElevatedButton(
                                onPressed: (){},
                                child: Text(
                                    "Join"
                                ),
                              )
                            ],
                          )

                          
                          
                        ],

                      ),
                    )
                  ),
                )
            ),
          )
        ],
      ),
    );

  }
}
    5. add recent quiz

    file: screens/home_page.dart

    
import 'package:flutter/material.dart';
import 'package:a/widgets/quiz_header.dart';
import 'package:a/widgets/recent_quiz.dart';

class HomePage extends StatelessWidget {

  HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              QuizHeader(),
              SizedBox(height: 20,),
              Expanded(
                child: ListView(
                  children: [
                    Text(
                      "Recent Quiz",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20
                      ),
                    ),

                    RecentQuiz(),
                    RecentQuiz(),
                    RecentQuiz(),
                    RecentQuiz(),
                    RecentQuiz()
                  ],
                ),
              )

            ],
          ),
        )
    );
  }
}

    widget :RecentQuiz

    file : widgets/recent_quiz.dart

    
import 'package:flutter/material.dart';
class RecentQuiz extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 5,
      shadowColor: Colors.redAccent,
      child: ListTile(
        onTap: (){},
        contentPadding:   EdgeInsets.all(15),
        leading: Container(
            width: 50,
            height: 50,
            decoration: BoxDecoration(
              color: Colors.redAccent,
              borderRadius: BorderRadius.circular(10)
            ),
        ),
      ),
    );
  }
}
    Body

    1. card()

    2. ListTile

    

import 'package:flutter/material.dart';
class RecentQuiz extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 5,
      shadowColor: Colors.redAccent,
      child: ListTile(
        onTap: (){},
        contentPadding:   EdgeInsets.all(15),
        leading: Container(
            width: 50,
            height: 50,
            decoration: BoxDecoration(
              color: Colors.redAccent,
              borderRadius: BorderRadius.circular(10)
            ),
          child: Icon(
            Icons.favorite_outline
          ),
        ),
        title: Text("Maths"),
        subtitle: Row(
          children: [
            Icon(
              Icons.local_airport
            ),
            Text("10/10Questions")
          ],
        )
      ),
    );
  }
}
  • Screen 2

    add following code where do you want

    1. PageView

    2. ListView

    3. RadioListTile

     
    
                    Expanded(
                      child: PageView.builder(
                        itemCount: 10,
                        itemBuilder: (context, index){
                            return ListView(
                              children: [


                                  Padding(
                                    padding: EdgeInsets.only(bottom: 2),
                                    child: RadioListTile(
                                      value:1,
                                      groupValue:false,
                                      title: Text("option1"),
                                      onChanged: (value){},
                                    ),
                                  ),


                                Padding(
                                  padding: EdgeInsets.only(bottom: 2),
                                  child: RadioListTile(
                                    value:1,
                                    groupValue:false,
                                    title: Text("option2"),
                                    onChanged: (value){},
                                  ),
                                )


                              ],
                            );
                        },
                      ),
              )